<template>
    <Layout>
        <div>
            <share-box model="kt.sw.pdt.tpl" :id="$page.KuERP.allKtSwPdtTpl[0].id"
                       :url="'/soft/'+$page.KuERP.allKtSwPdtTpl[0].id"/>
            <h1 align="center">{{$page.KuERP.allKtSwPdtTpl[0].name}}</h1>
            <v-tabs v-model="tab">
                <v-tab key="t1" href="#t1">概述
                </v-tab>
                <v-tab key="doc" href="#doc" v-if="$page.KuERP.allKtSwPdtTpl[0].contentIds">文档</v-tab>
                <v-tab key="demo" href="#demo" v-if="$page.KuERP.allKtSwPdtTpl[0].demoIds">应用范例</v-tab>
                <v-tab key="download" href="#download"
                       v-if="$page.KuERP.allKtSwPdtTpl[0].lastBeta||$page.KuERP.allKtSwPdtTpl[0].lastStable">下载
                </v-tab>
            </v-tabs>
            <v-tabs-items v-model="tab">
                <v-tab-item value="t1">
                    <div v-if="$page.KuERP.allKtSwPdtTpl[0].contentId"
                         v-html="$page.KuERP.allKtSwPdtTpl[0].contentId.content"/>
                </v-tab-item>
                <v-tab-item value="doc"> <div v-for="item in $page.KuERP.allKtSwPdtTpl[0].contentIds">
                        <g-link :to="'/content/'+item.id">{{item.name}}</g-link>
                    </div></v-tab-item>
                <v-tab-item value="demo">
                    <div v-for="item in $page.KuERP.allKtSwPdtTpl[0].demoIds">
                        <g-link :to="'/demo/'+item.id">{{item.name}}</g-link>
                    </div>
                </v-tab-item>
                <v-tab-item value="download">
                    <div v-if="$page.KuERP.allKtSwPdtTpl[0].changlog">
                        <h1>变更日志</h1>
                        {{$page.KuERP.allKtSwPdtTpl[0].changlog}}}
                    </div>
                    <div v-if="$page.KuERP.allKtSwPdtTpl[0].lastStable">
                        <h1>稳定版</h1>
                        <div>版本 : {{$page.KuERP.allKtSwPdtTpl[0].lastStable.version}}</div>
                        <div>更新日期 : {{getDate(new Date($page.KuERP.allKtSwPdtTpl[0].lastStable.writeDate))}}</div>
                        <g-link :to="$page.KuERP.allKtSwPdtTpl[0].lastStable.downURL">下载</g-link>
                    </div>
                    <div v-if="$page.KuERP.allKtSwPdtTpl[0].lastBeta">
                        <h1>测试版</h1>
                        <div>版本 : {{$page.KuERP.allKtSwPdtTpl[0].lastBeta.version}}</div>
                        <div>更新日期 : {{getDate(new Date($page.KuERP.allKtSwPdtTpl[0].lastBeta.writeDate))}}</div>
                        <g-link :to="$page.KuERP.allKtSwPdtTpl[0].lastBeta.downURL">下载</g-link>
                    </div>
                </v-tab-item>
            </v-tabs-items>
        </div>
    </Layout>
</template>

<page-query>
    query($id:Int!) {
    KuERP{
    allKtSwPdtTpl(id:$id) {
    name
    id
    contentId{
    content
    }
    lastBeta {
    name
    downURL
    version
    writeDate
    }
    lastStable {
    name
    downURL
    version
    writeDate
    }
    contentIds{
    id
    name
    }
    demoIds{
        id
        name
    }
    changlog
    websiteMetaTitle
    websiteMetaDescription
    websiteMetaKeywords
    }
    }}

</page-query>

<script>
    import ShareBox from "../components/ShareBox";
    import config from '../../gridsome.config';
    export default {
        components: {ShareBox},
        data() {
            return {
                tab: "tab", siteUrl: config.siteUrl,
             }
        },
        metaInfo() {
            return {
                title: this.$page.KuERP.allKtSwPdtTpl[0].websiteMetaTitle || this.$page.KuERP.allKtSwPdtTpl[0].name,
                meta: [{name: "description", conetnt: this.$page.KuERP.allKtSwPdtTpl[0].websiteMetaDescription},
                    {
                        name: "keywords",
                        content: this.$page.KuERP.allKtSwPdtTpl[0].websiteMetaKeywords
                    }, {"http-equiv": "X-UA-Compatible", content: "IE=edge"},
                    {
                        name: "viewport",
                        content: "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
                    }, {name: "apple-mobile-web-app-capable", content: "yes"},
                    {name: "apple-mobile-web-app-status-bar-style", content: "black"},
                    {name: "format-detection", content: "telephone=no"},
                    {property: "og:type", content: "website"},
                    {
                        property: "og:title",
                        content: this.$page.KuERP.allKtSwPdtTpl[0].websiteMetaTitle || this.$page.KuERP.allKtSwPdtTpl[0].name
                    },
                    {property: "og:description", content: this.$page.KuERP.allKtSwPdtTpl[0].websiteMetaDescription},
                    {property: "og:image", content: this.$page.KuERP.allKtSwPdtTpl[0].image},
                    {property: "og:url", content: this.siteUrl+'/soft/' + this.$page.KuERP.allKtSwPdtTpl[0].id}]
            }
        },
        methods: {
            getDate(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            }

        }
    };
</script>
